<template>
  <div style="height: 100%">
    <div v-if="true" class="noResult">
      <span>请先登录~</span>
    </div>
    <div v-else class="content">
      <div class="item">
        <img
          src="https://p1.music.126.net/asMzMZA7lJbWR4pcLghPwQ==/109951167847807241.jpg?param=200y200"
        />
        <span class="name">送爱的女孩的2022年度歌单</span>
      </div>
    </div>
  </div>
</template>
<script setup></script>
<style scoped lang="less">
.name {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  width: 130px;
  font-size: 14px;
  color: hsla(0, 0%, 100%, 0.6);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}
.content {
  display: flex;
  flex-wrap: wrap;
}
.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 14%;
  padding: 0 37px 20px 37px;
  img {
    width: 130px;
    height: 130px;
  }
  span:hover {
    color: #fff;
  }
}
.noResult {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 14px;
  color: hsla(0, 0%, 100%, 0.6);
}
</style>
